<template>
  <div class="page">
      <header-nav/>
      <div class="main-body h-center">
        <div class="left-area v-center">
          <information/>
          <article-category/>
        </div>
        <div class="right-area">
          <template v-for="(article, index) in article_list">
            <article-summary :key="index" v-bind="article"/>
          </template>
        </div>
      </div>
  </div>
</template>

<script>
import NavigationBar from '../../components/navigation';
import HeaderNav from '../../components/header_nav';
import Information from '../../components/information';
import ArticleSummary from '../../components/article';
import ArticleCategory from '../../components/category';
import ArticleApi from './model/api';

export default {
  name: 'Home',
  data () {
    return {
      article_list: [],
    };
  },
  async mounted () {
    const data = await ArticleApi.getArticle();
    this.article_list = data;
  },
  components: {
    NavigationBar,
    HeaderNav,
    Information,
    ArticleSummary,
    ArticleCategory,
  },
};
</script>
